<template>
    <div class="authentication">
        <div class="info">
            <van-icon name="info" />为确保是你本人操作，请完成一下验证
        </div>
        <div class="sendMsg">
            <div class="title">我们已经发送了校验码到你的手机</div>
            <div class="phone">{{$store.getters.encryptedPhone}}</div>
        </div>
        <div class="code">
            <van-field
                v-model="verifyCode"
                clearable
                type="digit"
                name="verifyCode"
                placeholder="验证码"
                maxlength="6"
                :formatter="formatter"
            >
                <template #button>
                    <van-button 
                        size="small"
                        plain 
                        color="#02b6fd"
                        @click="getVerifyCode"
                    >{{codeText}}</van-button>
                </template>
            </van-field>
            <van-button class="next" 
                :disabled="verifyCode?false:true"
                size="normal" 
                color="#02b6fd"
                block
                @click="$router.push('/settings/resetPsw',{phone:JSON.parse($store.state.token).phone})"
            >下一步</van-button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    name:'Authentication',
    setup(){
        const verifyCode = ref('');  // 验证码
        const codeText = ref('获取验证码');
        const codeTimeout = () => {
            let minute = 60;
            let timer = setInterval(timeout, 1000);
            function timeout(){
                codeText.value = minute + 's';
                minute--;
                if(minute === 0){
                    clearTimeout(timer);
                    codeText.value = '重新发送';
                }
            }
        }
        // 格式化函数 去除非数字的输入
        const formatter = (value) => value.replace(/\D/gi,'');
        // 随机获取验证码
        const getVerifyCode = () => {
            codeTimeout();
            setTimeout(() => {
                verifyCode.value = Math.floor(Math.random() * (1000000 - 100000) + 100000)
                console.log(verifyCode.value);
            }, 1000);
        }
        return {
            verifyCode,
            codeText,
            formatter,
            getVerifyCode
        }
    }
}
</script>

<style>
.authentication{
    height: 100vh;
    background: #fff;
    text-align: center;
}
.authentication .info{
    padding-top: 80px;
    font-size: 12px;
    color: #aaa;
}
.authentication .info .van-icon{
    font-size: 16px;
    color: #02b6fd;
}
.authentication .sendMsg div{
    margin-top: 10px;
    color: rgb(129, 129, 129);
}
.authentication .sendMsg .title{font-size: 14px;}
.authentication .sendMsg .phone{font-size: 25px;}
.authentication .code{
    padding: 0 25px;
}
.authentication .code .van-field{
    margin-bottom: 15px;
    border-bottom: 1px solid #aaa;
}
/* .authentication .code .van-button.next{background: #02b6fd;} */
</style>